import { Like } from "@icon-park/react";
import { type hitokoto } from "../../type/hitokoto";
import { myFavouriteSet } from "../../config/myFavourite";
import styles from "./style.module.scss";
import { useState } from "react";
export default function TikoCard(props:{hitokoto:hitokoto}): JSX.Element {
  const [refresh,setRefresh] = useState(false)
  console.log(myFavouriteSet);
  const changeLikeState = () => {
    if(props.hitokoto.isFavourite===undefined){
      props.hitokoto.isFavourite = true;
    }else{
      props.hitokoto.isFavourite = !props.hitokoto.isFavourite
    }
    if(props.hitokoto.isFavourite===false){
         myFavouriteSet.delete(props.hitokoto);
    }else{
         myFavouriteSet.add(props.hitokoto)
    }
    setRefresh(!refresh)
  };
  return (
    <div className={styles.tikoCard} id={styles[props.hitokoto?.type]}>
      <div className={styles.hitokoto}>{props.hitokoto?.hitokoto}</div>
      <div className={styles.from_who}>
        ——{props.hitokoto?.from_who}「{props.hitokoto?.from}」
      </div>
      <div className={styles.iconBox}>
        <div onClick={changeLikeState} className={styles.littleBox}>
          { props.hitokoto.isFavourite ? (
            <Like theme="filled" size="39" fill="#ff0000" strokeWidth={3} />
          ) : (
            <Like theme="outline" size="39" fill="#525050" strokeWidth={3} />
          )}
        </div>
      </div>
    </div>
  );
}
